<template>
  <div class="footer">
    <div class="footer-left">
      <el-image :src="src">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
      <div>开口说英语</div>
    </div>
    <div class="footer-center">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>意见反馈</li>
      </ul>
      <div class="footer-center-line" />
      <ul>
        <li>在线客服</li>
        <li>法律条款</li>
        <li>论坛</li>
      </ul>
      <div class="footer-center-line" />
      <ul>
        <li>公众号</li>
        <li>新浪微博</li>
        <li>&nbsp;</li>

      </ul>

    </div>
    <div class="footer-right">
      <el-image :src="src">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
      <div>关注我们，了解更多</div>
    </div>

  </div>
</template>

<script>
export default {
  data: function() {
    return {
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  }

}
</script>

<style lang="scss" scoped>
.footer{
  min-width:1200px;
  height: 300px;
  padding: 0 6%;
  background-color: rgb(75,79,87);
  display: flex;
  align-items: center;
  justify-content: space-around;
    el-image {
      width: 100px;
      height: 100px;
    }
    .footer-left{
      div{
        font-size: 14px;
        margin-top:14px;
        color: rgb(223,223,223);
      }
    }
    .footer-center{
      display: flex;
      align-items: center;
      width: 70%;
      justify-content: center;
      color: rgb(223,223,223);
      ul{
        height: 100%;
        margin: 0 10%;
        li{
          padding: 30px 0;
        }
      }
      .footer-center-line{
        width: 1px;
        height: 260px;
        border: 1px solid rgb(106,106,106);
      }

    }

    .footer-right{
      div{
        text-align: center;
        font-size: 14px;
        margin-top:14px;
        color: rgb(223,223,223);
      }
    }
}
</style>
